<template>
  <div id="info-wrap">
    <el-row :gutter="14">
      <el-col :span="4">
        <div class="label-wrap cayegory">
          <label for>类型:</label>
          <div class="wrap-content">
            <el-select v-model="category_value" placeholder="请选择">
              <el-option
                v-for="item in options.category1"
                :key="item.id"
                :label="item.category_name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
        </div>
      </el-col>

      <el-col :span="8">
        <div class="label-wrap data">
          <label for>日期:</label>
          <div class="wrap-content">
            <el-date-picker
              v-model="date_value"
              type="datetimerange"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </div>
        </div>
      </el-col>

      <el-col :span="4">
        <div class="label-wrap key-word">
          <label for>关键字:</label>
          <div class="wrap-content">
            <el-select v-model="search_key">
              <el-option
                v-for="item in searchOption"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </div>
        </div>
      </el-col>

      <el-col :span="4">
        <el-input v-model="search_keyWork" placeholder="请输入内容"></el-input>
      </el-col>

      <el-col :span="2">
        <el-button type="danger" @click="getList">搜索</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="danger" @click="addDialog = true">新增</el-button>
      </el-col>
    </el-row>
    <!-- 数据表格 -->
    <el-table
      :data="tableData.item"
      @selection-change="handleSelectionChange"
      style="width: 100%"
      border
      v-loading="loadingData"
    >
      <el-table-column type="selection" width="45"></el-table-column>
      <el-table-column prop="title" label="标题" width="830"></el-table-column>
      <el-table-column prop="categoryId" label="类型" width="130" :formatter="toCategory"></el-table-column>
      <el-table-column prop="createDate" label="日期" width="237" :formatter="toData"></el-table-column>
      <el-table-column prop="user" label="管理员" width="115"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" @click="deleItem(scope.row.id)">删除</el-button>
          <el-button type="success" size="mini" @click="editItem(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 底部分页 -->
    <el-row>
      <el-col :span="12">
        <el-button type="warning" size="medium" class="removeBtn" @click="deleAll">批量删除</el-button>
      </el-col>
      <el-col :span="12">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-col>
    </el-row>
    <!-- 新增信息模态框 -->
    <DialogInfo :isopen.sync="addDialog" :category="options.category1" />
    <!-- 编辑信息模态框 -->
    <DialogEditInfo :isopen.sync="editDialog" :editData="tableData.editData" :category="options.category1" @foremit="getList" />
  </div>
</template>

<script>
import DialogInfo from "./dialog/info";
import DialogEditInfo from "./dialog/edit";
import { GetCategory, GetList, DeleteInfo } from "../../api/news";
import { reactive, ref, onMounted, watch } from "@vue/composition-api";
import { timestampToTime } from "@/utils/common";
export default {
  name: "infoList",
  components: { DialogInfo, DialogEditInfo },
  setup(props, { root }) {
    const options = reactive({
      category1: []
    });
    const tableData = reactive({
      item: [],
      editData:{}
    });
    // 搜索 关键字
    const searchOption = reactive([
      { value: "id", label: "ID" },
      { value: "title", label: "标题" }
    ]);
    // 基础数据
    const category_value = ref("");
    const date_value = ref("");
    const search_key = ref("id");
    const search_keyWork = ref("");
    const total = ref(0);
    const addDialog = ref(false);
    const loadingData = ref(false);
    const deleteInfoId = ref("");
    const editDialog = ref(false)
    // 页码
    const page = reactive({
      pageNumber: 1,
      pageSize: 10
    });
    // 函数定义

    // 删除信息
    const deleItem = id => {
      deleteInfoId.value = [id];
      root.confirm({
        content: "确认删除此信息",
        fn: isDele
      });
    };
    // 批量删除信息
    const deleAll = () => {
      if (!deleteInfoId.value) {
        root.$message.error("请选择删除选项");
        return false;
      }
      root.confirm({
        content: "确认删除所选信息",
        fn: isDele
      });
    };
    // 多选事件
    const handleSelectionChange = val => {
      let id = val.map(item => item.id);

      console.log(id);
      deleteInfoId.value = id;
    };
    const isDele = () => {
      DeleteInfo({ id: deleteInfoId.value })
        .then(response => {
          deleteInfoId.value = "";
          getList();
        })
        .catch(error => {});
      root.$message({
        type: "success",
        message: "删除成功"
      });
    };
    // 获取信息分类
    const getCategory = () => {
      root.$store.dispatch("getCategory/GET_CATEGORY").then(response => {
        let {
          data: {
            data: { data }
          }
        } = response;
        console.log(data);
        options.category1 = data;
      });
    };
    // 获取分页数值
    const handleSizeChange = val => {
      console.log(val);
      page.pageSize = val;
    };
    const handleCurrentChange = val => {
      console.log(val);
      page.pageNumber = val;

      getList();
    };
    // 搜索数据请求处理
    const formatData = () => {
      let requestData = {
        pageNumber: page.pageNumber,
        pageSize: page.pageSize
      };
      if (category_value.value) {
        requestData.categoryId = category_value.value;
      }
      if (date_value.value.length > 0) {
        requestData.startTiem = date_value.value[0];
        requestData.endTime = date_value.value[1];
      }
      if (category_value.value) {
        requestData.categoryId = category_value.value;
      }
      if (search_keyWork.value) {
        requestData[search_key.value] = search_keyWork.value;
      }
      return requestData;
      // console.log(category_value.value);
      // console.log(date_value.value);
      // console.log(search_key.value);
      // console.log(search_keyWork.value);
    };
    // 获取列表信息数据
    const getList = () => {
      let requestData = formatData();
      loadingData.value = true;
      GetList(requestData).then(response => {
        let data = response.data.data;
        tableData.item = data.data;
        // 统计总条数
        total.value = data.total;
        console.log(tableData.item);
        console.log(total.value);
        loadingData.value = false;
      });
    };
    // 时间 类型 转换
    const toData = (row, cloumn, cellValue, index) => {
      return timestampToTime(row.createDate);
    };
    const toCategory = (row, cloumn, cellValue, index) => {
      let categoryData = options.category1.filter(
        item => item.id == row.categoryId
      )[0];
      return categoryData.category_name;
    };
    // 编辑信息
    const editItem = (editData) => {
      // editId.value = id
      tableData.editData = editData
      console.log(tableData.editData);
      editDialog.value = true
    };
    /*
    生命周期 
     */
    onMounted(() => {
      getCategory();
      getList();
    });
    /*
    监听 
     */
    // watch(()=>categoryItem.item,(value)=>{
    //   options.category1 = value
    // })
    return {
      // 复杂数据
      options,
      searchOption,
      tableData,
      page,
      // 基础数据
      date_value,
      category_value,
      search_key,
      search_keyWork,
      addDialog,
      editDialog,
      total,
      loadingData,
      deleteInfoId,

      // 函数
      handleCurrentChange,
      handleSizeChange,
      deleItem,
      editItem,
      deleAll,
      getCategory,
      getList,
      toData,
      toCategory,
      handleSelectionChange,
      formatData
    };
  }
};
</script>

<style lang="scss" scoped>
.label-wrap {
  &.cayegory {
    @include labelDom(center, 60, 40);
  }
  &.data {
    @include labelDom(right, 93, 40);
  }
  &.key-word {
    @include labelDom(center, 100, 40);
  }
}
.removeBtn {
  text-align: left !important;
}
.el-row {
  margin: 30px 0;
}
</style>
